import { ProLayout } from "@ant-design/pro-components";
import { Link, Outlet, useLocation } from "react-router-dom";
import { routerArray } from "../routes";
import { getMenusData, InitialSettings } from "./utils";
import styles from "./index.module.less";
import { MAIN_PRIMARY_COLOR, MAIN_PRIMARY_COLOR_OPACITY_35 } from "../enums";
import Header from "./Header";
import { MENU_DATA } from "./menuData";
import { getUserInfo, getUserMenus } from "@/api/modules/user";
import { useAuthActionFunction } from "@/store/modules/auth";
import { cloneDeep, isArray, map, filter } from 'lodash';

const BaseLayout = () => {
	const location = useLocation();
	const menusData = getMenusData(routerArray);
	const [setUserAuth] = useAuthActionFunction(["setUserAuth"]);

	// console.log(menusData, MENU_DATA, '<=========111')

	const handleGetMenuByAuth = async () => {
		const userInfoData = await getUserInfo({});
		setUserAuth(userInfoData?.data?.permissions)
		return MENU_DATA
	}

	const handleGetUserMenus = async () => {
		const menusData = await getUserMenus({})
		const initData = menusData?.data
		const result = filterNestedArrayLodash(initData);
		console.log(result, '<======menusData')
		return result
	}

	const filterNestedArrayLodash = (array: any[]) => {
		if (!isArray(array)) return [];
		
		const clonedArray = cloneDeep(array);
		
		return map(clonedArray, (item:any) => {
			if (item.children && isArray(item.children)) {
				item.children = filterNestedArrayLodash(item.children);
			}
			const transformResult = {
				id: item.id,
				type: item.type,
				name: item.name,
				icon: item.icon,
				pathName: item.component,
				path: item.path,
				children: item.children
			};
			if(!item.icon) delete transformResult.icon
			if(!item.children || item.children.length === 0) delete transformResult.children
			return transformResult
		}).filter((item: any) => {
			return item.type === 1 || item.type === 0
		});
	}

	return (
		<div className={styles.container}>
			{/*@ts-ignore*/}
			<ProLayout
				{...InitialSettings}
				breadcrumbRender={(routers = []) => []}
				// breadcrumbProps={{
				// 	itemRender: (route) => {
				// 		if (route.hideInBreadcrumb) return null;
				// 		return route.name;
				// 	}
				// }}
				token={{
					sider: {
						colorMenuBackground: "#fff",
						colorTextMenuSelected: MAIN_PRIMARY_COLOR,
						colorBgMenuItemSelected: MAIN_PRIMARY_COLOR_OPACITY_35,
						colorBgMenuItemCollapsedSelected: MAIN_PRIMARY_COLOR_OPACITY_35
					},
					header: {
						heightLayoutHeader: 70
					}
				}}
				siderWidth={240}
				headerRender={() => <Header />}
				// headerContentRender={() => <div>324234234</div>}
				location={location}
				menuItemRender={(item: any, dom) => {
					return (
						<Link to={item?.path} key={item?.id} className={styles.link_wrap}>
							{Boolean(item.icon) && (
								<img
									src={`/icon/${item.icon}${location.pathname?.indexOf(item.pathName) > -1 ? "_active" : ""}.png`}
									style={{ marginRight: "9px" }}
									width={item.icon === "jiaoyi" || item.icon === "setting" ? 18 : 16}
								/>
							)}
							<span style={{ marginTop: item.icon === "home" || item.icon === "jiaoyi" ? "2px" : "0px" }}>{item.name}</span>
						</Link>
					);
				}}
				subMenuItemRender={(item: any) => {
					return (
						<div key={item?.id} className={styles.link_wrap}>
							{Boolean(item.icon) && (
								<img
									src={`/icon/${item.icon}${location.pathname?.indexOf(item.pathName) > -1 ? "_active" : ""}.png`}
									style={{ marginRight: "9px" }}
									width={item.icon === "jiaoyi" || item.icon === "setting" ? 18 : 16}
								/>
							)}
							<span style={{ marginTop: item.icon === "home" ? "2px" : "0px" }}>{item.name}</span>
						</div>
					);
				}}
				collapsedButtonRender={false}
				// menuDataRender={handleGetMenuByAuth}
				menu={{ request: handleGetUserMenus }}
			>
				<Outlet />
			</ProLayout>
		</div>
	);
};
export default BaseLayout;
